// 使用 React api 在页面上创建一个UI

// 1 导入
import React from 'react';
import ReactDOM from 'react-dom'; // 学习一次，到处使用
import './index.css';

class A {}

// 2 React 语法创建元素，XXX语法
const p = React.createElement('p', { id: 123, className: 'title' }, '月薪过万');

// 由里往外写
const li1 = React.createElement('li', null, '华为');
const li2 = React.createElement('li', null, 'iPhone');

const ul = React.createElement('ul', null, li1, li2);
// const ul2 = React.createElement('ul', null, [li1, li2]);

const h1 = React.createElement('h1', null, '购物列表');

// createElement 第三个及以后的参数写法：
// 1 , 多个元素跟下去
// 2 写一个数组
const div = React.createElement('div', null, h1, ul);

// 由外往里写
const div2 = React.createElement(
  'div',
  null,
  React.createElement('h1', null, '购物列表'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '华为'),
    React.createElement('li', null, 'iPhone')
  )
);

console.log(typeof div, div);

// 分割线-----jsx------

const hxx = React.createElement('h1', null, '购物列表');
const name = 'Jack';
// 声明式 视图 构建
const h1Jsx = <h1>Hello React</h1>;
// vue视图分开的看着舒服
const tag = (
  <div>
    <h1>购物列表</h1>
    <ul>
      <li>华为</li>
      <li>iPhone</li>
      <li>OPPO</li>
    </ul>
  </div>
);

// 3 渲染
ReactDOM.render(tag, document.getElementById('root'));

// DOM 做diff
